﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layx 官方示例大全 v2.0.5</title>
    <style type="text/css">
        button {
            margin: 5px;
        }

        pre {
            border: 1px solid #ccc;
            padding: 10px;
            background: #fff;
            height: 100px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h3>开源地址</h3>
    <a id="gitee" href="https://gitee.com/monksoul/LayX" target="_blank">Gitee</a>
    <a id="github" href="https://github.com/MonkSoul/Layx" target="_blank">Github</a>
    <h3>窗口类型</h3>
    <button id="wbck">文本窗口</button>
    <button id="wyck">网页窗口</button>
    <button id="xxck">消息窗口</button>
    <button id="tsck">提示窗口</button>
    <button id="xwck">询问窗口</button>
    <button id="srck">输入窗口</button>
    <button id="jzck">加载窗口</button>
    <button id="tbck">打开淘宝</button>
    <button id="danniu">带操作按钮</button>
    <button id="ckz">窗口组</button>
    <h3>窗口外观</h3>
    <button id="mrwg">默认外观</button>
    <button id="btlhs">标题栏灰色</button>
    <button id="btlmls">标题栏紫色</button>
    <button id="yj">圆角</button>
    <button id="hsck">灰色窗口</button>
    <button id="ahzt">暗黑主题</button>
    <button id="tmck">透明窗口</button>
    <button id="zygbal">只有关闭按钮</button>
    <button id="ggcktb">更改窗口图标</button>
    <button id="myyy">没有阴影</button>
    <button id="wbk">无边框</button>
    <button id="bntd">不能拖动</button>
    <button id="bntcksqy">不能拖出可视区域</button>
    <button id="znsptd">只能水平拖动</button>
    <button id="zncztd">只能垂直拖动</button>
    <button id="bntydx">不能拖曳大小</button>
    <button id="ckzg">窗口阻隔</button>
    <button id="smzdgb">3秒自动关闭</button>
    <button id="dzjzwb">定制加载文本</button>
    <button id="dztl">带状态栏</button>
    <button id="dkzdck">打开置顶窗口</button>
    <button id="bxsbtl">不显示标题栏</button>
    <button id="bxscktb">不显示窗口图标</button>
    <button id="zdhqwybt">自动获取网页标题</button>
    <button id="zdzdh">自动最大化</button>
    <h3>窗口位置</h3>
    <button id="zjdk">中间打开</button>
    <button id="zsj">左上角</button>
    <button id="ysj">右上角</button>
    <button id="zxj">左下角</button>
    <button id="rxj">右下角</button>
    <button id="szj">上中间</button>
    <button id="zzj">左中间</button>
    <button id="xzj">下中间</button>
    <button id="yzj">右中间</button>
    <button id="zdy">自定义 上 100，左 100</button>
    <h3>窗口事件</h3>
    <button id="jzsj">事件监听</button>
    <div id="event" style="border:1px solid #ccc;background:#f5f5f5; height:300px;overflow:auto;font-size:14px;padding:10px;line-height:1.5;">
    </div>
    <h3>窗口方法</h3>
    整理中...
    <h3>窗口对象</h3>
    整理中...
    <h3>窗口通讯</h3>
    整理中...
    <script type="text/javascript">

        //生成从minNum到maxNum的随机数
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }
        function $(selector) {
            return document.querySelector(selector);
        }


        //===================== 下面才是demo 代码 ==================
        window.onload = function () {

            $("#wbck").onclick = function (e) {
                window.top.layx.html('wbck', '文本窗口', '<div style="padding:10px">我是一个文本窗口，支持 <strong>HTML</strong> 和 HTMLElment 对象</div>', { position: [randomNum(0, 200), randomNum(0, 200)] })
                e.stopPropagation();
            }
            $("#wyck").onclick = function (e) {
                window.top.layx.iframe('wyck', '网页窗口', './iframe.html', { position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#xxck").onclick = function (e) {
                window.top.layx.msg("我是消息窗口，5秒后关闭");
                e.stopPropagation();
            }
            $("#tsck").onclick = function (e) {
                window.top.layx.alert(null, "我是提示窗口");
                e.stopPropagation();
            }
            $("#xwck").onclick = function (e) {
                window.top.layx.confirm(null, "我是询问窗口", function (id) {
                    alert('你点击了确定');
                    window.top.layx.destroy(id);
                });
                e.stopPropagation();
            }
            $("#srck").onclick = function (e) {
                window.top.layx.prompt(null, "请输入一个值试试", function (id, value, textarea) {
                    alert('你输入的值为：' + value);
                    window.top.layx.destroy(id);
                });
                e.stopPropagation();
            }
            $("#jzck").onclick = function (e) {
                window.top.layx.load('loadid', '数据正在加载中（5秒后关闭）...');
                setTimeout(function () {
                    window.top.layx.destroy('loadid');
                }, 5000);
                e.stopPropagation();
            }
            $("#tbck").onclick = function (e) {
                window.top.layx.iframe('tbck', '淘宝网', 'https://www.taobao.com', { position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#danniu").onclick = function (e) {
                window.top.layx.iframe('danniu', '带操作按钮', './iframe.html', {
                    statusBar: true,
                    buttons: [
                        {
                            label: '其他按钮',
                            callback: function (id) {
                                alert("我是其他按钮，点击后啥也不干");
                            }
                        },
                        {
                            label: '确定',
                            callback: function (id) {
                                alert("我是确定按钮，点击后关闭");
                                top.layx.destroy(id);
                            }
                        },
                        {
                            label: '取消',
                            callback: function (id) {
                                top.layx.destroy(id);
                            }
                        }
                    ], position: [randomNum(0, 200), randomNum(0, 200)]
                });
                e.stopPropagation();
            }
            $("#mrwg").onclick = function (e) {
                window.top.layx.iframe('mrwg', '默认外观', './iframe.html', { position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#btlhs").onclick = function (e) {
                window.top.layx.iframe('btlhs', '标题栏灰色', './iframe.html', { controlStyle: 'background-color: #f5f5f5;', position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#btlmls").onclick = function (e) {
                window.top.layx.iframe('btlmls', '标题栏紫色', './iframe.html', { style: '#layx-btlmls .layx-inlay-menus .layx-icon:hover {background-color: #9953c0;}', controlStyle: 'background-color: #7719aa;color:#fff;', position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#yj").onclick = function (e) {
                window.top.layx.iframe('yj', '圆角', './iframe.html', { style: '#layx-yj{border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;}', position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#hsck").onclick = function (e) {
                window.top.layx.iframe('hsck', '灰色窗口', './iframe.html', { bgColor: "#ccc", position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#ahzt").onclick = function (e) {
                window.top.layx.iframe('ahzt', '暗黑主题', './iframe.html', { bgColor: "#000", style: '#layx-ahzt .layx-inlay-menus .layx-icon:hover {background-color: #666;}', controlStyle: 'color:#fff;', position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#tmck").onclick = function (e) {
                window.top.layx.iframe('tmck', '透明窗口', './iframe.html', { opacity: 0.5, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#zygbal").onclick = function (e) {
                window.top.layx.iframe('zygbal', '只有关闭按钮', './iframe.html', { minMenu: false, maxMenu: false, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#ggcktb").onclick = function (e) {
                window.top.layx.iframe('ggcktb', '更改窗口图标', './iframe.html', { icon: '<img src="logo.png" style="height:22px;display:block;" />', position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#myyy").onclick = function (e) {
                window.top.layx.iframe('myyy', '没有阴影', './iframe.html', { shadow: false, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#wbk").onclick = function (e) {
                window.top.layx.iframe('wbk', '无边框', './iframe.html', { border: false, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#bntd").onclick = function (e) {
                window.top.layx.iframe('bntd', '不能拖动', './iframe.html', { movable: false });
                e.stopPropagation();
            }
            $("#bntcksqy").onclick = function (e) {
                window.top.layx.iframe('bntcksqy', '不能拖出可视区域', './iframe.html', {
                    moveLimit: {
                        leftOut: false,
                        rightOut: false,
                        topOut: false,
                        bottomOut: false,
                    }, position: 'rc'
                });
                e.stopPropagation();
            }
            $("#znsptd").onclick = function (e) {
                window.top.layx.iframe('znsptd', '只能水平拖动', './iframe.html', {
                    moveLimit: {
                        vertical: true
                    }, position: 'bc'
                });
                e.stopPropagation();
            }
            $("#zncztd").onclick = function (e) {
                window.top.layx.iframe('zncztd', '只能垂直拖动', './iframe.html', {
                    moveLimit: {
                        horizontal: true
                    }, position: [randomNum(0, 200), randomNum(0, 200)]
                });
                e.stopPropagation();
            }
            $("#bntydx").onclick = function (e) {
                window.top.layx.iframe('bntydx', '不能拖曳大小', './iframe.html', { resizable: false, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#ckzg").onclick = function (e) {
                window.top.layx.iframe('ckzg', '窗口阻隔', './iframe.html', { shadable: true, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }
            $("#smzdgb").onclick = function (e) {
                window.top.layx.iframe('smzdgb', '3秒自动关闭', './iframe.html', { autodestroy: 3000, position: 'ct' });
                e.stopPropagation();
            }
            $("#dzjzwb").onclick = function (e) {
                window.top.layx.iframe('dzjzwb', '定制加载文本', 'https://www.oschina.net', { loaddingText: '亲们，我正在加载内容哦~', position: 'ct' });
                e.stopPropagation();
            }
            $("#dztl").onclick = function (e) {
                window.top.layx.iframe('dztl', '带状态栏', './iframe.html', { statusBar: '我是状态栏哦~~', position: 'ct' });
                e.stopPropagation();
            }
            $("#dkzdck").onclick = function (e) {
                window.top.layx.iframe('dkzdck', '打开置顶窗口', './iframe.html', { alwaysOnTop: true, stickMenu: true, position: 'ct' });
                e.stopPropagation();
            }
            $("#bxsbtl").onclick = function (e) {
                window.top.layx.html('bxsbtl', '不显示标题栏', '<div style="padding:10px"><button onclick="window.top.layx.destroy(\'bxsbtl\')">关闭</button></div>', { control: false, position: 'ct' });
                e.stopPropagation();
            }
            $("#bxscktb").onclick = function (e) {
                window.top.layx.iframe('bxscktb', '不显示窗口图标', './iframe.html', { icon: false, position: 'ct' });
                e.stopPropagation();
            }
            $("#zjdk").onclick = function (e) {
                window.top.layx.iframe('zjdk', '中间打开', './iframe.html', { position: 'ct' });
                e.stopPropagation();
            }
            $("#zsj").onclick = function (e) {
                window.top.layx.iframe('zsj', '左上角', './iframe.html', { position: 'lt' });
                e.stopPropagation();
            }
            $("#ysj").onclick = function (e) {
                window.top.layx.iframe('ysj', '右上角', './iframe.html', { position: 'rt' });
                e.stopPropagation();
            }
            $("#zxj").onclick = function (e) {
                window.top.layx.iframe('zxj', '左下角', './iframe.html', { position: 'lb' });
                e.stopPropagation();
            }
            $("#rxj").onclick = function (e) {
                window.top.layx.iframe('zxj', '右下角', './iframe.html', { position: 'rb' });
                e.stopPropagation();
            }
            $("#szj").onclick = function (e) {
                window.top.layx.iframe('szj', '上中间', './iframe.html', { position: 'tc' });
                e.stopPropagation();
            }
            $("#zzj").onclick = function (e) {
                window.top.layx.iframe('zzj', '左中间', './iframe.html', { position: 'lc' });
                e.stopPropagation();
            }
            $("#xzj").onclick = function (e) {
                window.top.layx.iframe('xzj', '下中间', './iframe.html', { position: 'bc' });
                e.stopPropagation();
            }
            $("#yzj").onclick = function (e) {
                window.top.layx.iframe('yzj', '右中间', './iframe.html', { position: 'rc' });
                e.stopPropagation();
            }
            $("#zdy").onclick = function (e) {
                window.top.layx.iframe('zdy', '自定义 上 200，左 200', './iframe.html', { position: [100, 100] });
                e.stopPropagation();
            }

            $("#zdhqwybt").onclick = function (e) {
                window.top.layx.iframe('zdhqwybt', null, './iframe.html', { useFrameTitle: true, position: [randomNum(0, 200), randomNum(0, 200)] });
                e.stopPropagation();
            }

            $("#zdzdh").onclick = function (e) {
                window.top.layx.iframe('zdzdh', '打开自动最大化', './iframe.html', {
                    event: {
                        onload: {
                            after: function (layxWindow, winform) {
                                top.layx.max(winform.id);
                            }
                        }
                    }
                });
                e.stopPropagation();
            }

            var div = document.getElementById("event");
            $("#jzsj").onclick = function (e) {
                window.top.layx.iframe('jzsj', '加载事件', './iframe.html', {
                    position: 'ct',
                    event: {
                        onload: {
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>加载之前...</strong></div><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>加载之后...</strong></div><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 最小化事件
                        onmin: {
                            // 最小化之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>最小化之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 最小化之后
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>最小化之后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 最大化事件
                        onmax: {
                            // 最大化之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>最大化之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 最大化之后
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>最大化之后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 恢复事件
                        onrestore: {
                            // 恢复之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>恢复窗口之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 恢复之后
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>恢复窗口之后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 关闭事件
                        ondestroy: {
                            // 关闭之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>关闭之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 关闭之后
                            after: function () {
                                div.innerHTML += "<div>" + new Date() + " <strong>关闭之后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 移动事件
                        onmove: {
                            // 移动之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>移动窗口之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 移动中
                            progress: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>移动窗口中...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 移动之后
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>移动窗口之后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        },
                        // 拖曳事件
                        onresize: {
                            // 拖曳之前，return false 不执行
                            before: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>改变窗口大小之前...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 拖曳中
                            progress: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>改变窗口大小之中...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            },
                            // 拖曳之后
                            after: function (layxWindow, winform) {
                                div.innerHTML += "<div>" + new Date() + " <strong>改变窗口大小后...</strong><pre>" + JSON.stringify(winform, null, 4) + "</pre><div>===================</div></div>";
                                div.scrollTop = div.scrollHeight;
                            }
                        }
                    }
                });
                e.stopPropagation();
            }

            $("#ckz").onclick = function (e) {
                window.top.layx.group('ckz', [
                    {
                        id: 'group1',
                        title: '窗口组1',
                        type: 'html',
                        content: '你好啊，百小僧'
                    },
                    {
                        id: 'group2',
                        useFrameTitle: true,
                        type: 'url',
                        url: './iframe.html'
                    },
                    {
                        id: 'taobao',
                        title:'淘宝网',
                        type: 'url',
                        url: 'https://www.taobao.com'
                    }
                ], 0);

                e.stopPropagation();
            }
        }
    </script>
</body>
</html>